<template>
    <div class="house-index">
        <wrapper-content>
            <div class="page-search">
                <a-form
                        layout="inline"
                        :autoFormCreate="(form)=>{this.searchForm = form}"
                        @submit.prevent="handleSearchSubmit"
                >
                     <a-form-item
                            label='姓名'
                            fieldDecoratorId="u_name"
                    >
                        <a-input placeholder='请输入关键字'/>
                    </a-form-item>
                    <a-form-item
                            label='项目名称'
                            fieldDecoratorId="p_name"
                    >
                        <a-input placeholder='请输入关键字'/>
                    </a-form-item>
                     <a-form-item
                            label='版本'
                            fieldDecoratorId="version"
                    >
                        <a-input placeholder='请输入关键字'/>
                    </a-form-item>
                    <a-form-item
                            label='完成日期'
                            fieldDecoratorId="date"
                    >
                        <a-range-picker :placeholder="['开始日期','结束日期']"></a-range-picker>
                    </a-form-item>
                    <a-form-item>
                        <a-button icon="search" type="primary" htmlType='submit'
                                :loading="searchLoading"
                        >搜索
                        </a-button>
                    </a-form-item>

                    <a-form-item>
                        <a-button @click="exportData" class="m-l">
                            <a-icon type="export"/>
                            导出
                        </a-button>
                    </a-form-item>
                </a-form>
            </div>
            <a-table :expandRowByClick="true" @expand ="handleTaskChildStatistics" :columns="columns" :dataSource="dataSource" :loading="loading" :showTotal="pagination.showTotal" :pagination="pagination"
                     @change="pageChange"
                     rowKey="id">
                <template slot="difficulty" slot-scope="text,record">
                    <span class="success-color" v-if="record.difficulty === 0">1</span>
                    <span v-else-if="record.difficulty === 1">2</span>
                    <span v-else-if="record.difficulty === 2">3</span>
                    <span v-else-if="record.difficulty === 3">5</span>
                    <span v-else-if="record.difficulty === 4">8</span>
                </template>
                <template slot="v_status" slot-scope="text,record">
                    <span class="success-color" v-if="record.v_status === 0">未开始</span>
                    <span v-else-if="record.v_status === 1">进行中</span>
                    <span v-else-if="record.v_status === 2">延期发布</span>
                    <span v-else-if="record.v_status === 3">已发布</span>
                </template>
                <template slot="done" slot-scope="text,record">
                    <span class="success-color" v-if="record.done === 1">是</span>
                    <span v-else>否</span>
                </template>
                 <p slot="expandedRowRender" slot-scope="record" style="margin: 0" @click="handleTaskChildStatistics(record)">
                    <a-table :showHeader="false" :columns="columns" :dataSource="childrenDataSource" :loading="loading" rowKey="id" :pagination="false">
                        <template slot="difficulty" slot-scope="text,record">
                            <span class="success-color" v-if="record.difficulty === 0">1</span>
                            <span v-else-if="record.difficulty === 1">2</span>
                            <span v-else-if="record.difficulty === 2">3</span>
                            <span v-else-if="record.difficulty === 3">5</span>
                            <span v-else-if="record.difficulty === 4">8</span>
                        </template>
                    </a-table>
                </p>
            </a-table>
        </wrapper-content>
    </div>
</template>
<script>
    import {getTaskOneStatistics, getTaskChildStatistics } from '@/api/statistics';
    import pagination from "@/mixins/pagination";
    import $http from '@/assets/js/http'

    const columns = [
    {
        title: '部门名称',
        dataIndex: 'd_name',
        width: '10%',
    },
    {
        title: '姓名',
        dataIndex: 'u_name',
        width: '6%',
    },
    {
        title: '项目名称',
        dataIndex: 'p_name',
        width: '8%',
    },
    {
        title: '版本库',
        dataIndex: 'featuresName',
        width: '8%',
    },
    {
        title: '版本',
        dataIndex: 'versionName',
        width: '8%',
    },
    {
        title: '版本状态',
        dataIndex: 'v_status',
        scopedSlots: {
            customRender: 'v_status'
        }
    },
    {
        title: '任务类型',
        dataIndex: 't_type',
        width: '8%',
    },
    {
        title: '任务名称',
        dataIndex: 't_name',
        width: '24%',
    },
    {
        title: '任务点数',
        dataIndex: 'difficulty',
    },
    {
        title: '完成时间',
        dataIndex: 'endTime',
    },
    {
        title: '是否完成',
        dataIndex: 'done',
        scopedSlots: {
            customRender: 'done'
        }
    },
    {
        title: '工时',
        dataIndex: 'work_time',
        width: '5%',
    }
    ];

    export default {
        mixins: [pagination],
        data() {
            return {
                columns,
                dataSource: [],
                childrenDataSource:[],
                selectedRowKeys: [],
                loading: true,
                searchForm: {},
                searchLoading: false
            }
        },
        created() {
            this.init();
        },
        methods: {
            init() {
                let app = this;
                app.loading = true;
                app.selectedRowKeys = [];
                app.pagination.pageSize = 50;
                getTaskOneStatistics(app.requestData).then(res => {
                    app.dataSource = res.data.list;
                    app.pagination.total = res.data.total;
                    app.pagination.page = res.data.page;
                    app.loading = false;
                });
            },
            handleTaskChildStatistics(expanded, record) {
                let app = this;
                getTaskChildStatistics({pId:record.id }).then(res => {
                    app.childrenDataSource = res.data.list;
                })
            },
            onSelectChange(selectedRowKeys) {
                this.selectedRowKeys = selectedRowKeys
            },
            listAction(type) {
                let app = this;
                switch (type.key) {
                    case 'setReadied':
                        app.dataSource.forEach(function (v, k) {
                            const index = app.selectedRowKeys.find(item => item == v.id);
                            if (index) {
                                app.dataSource[k].is_read = 1;
                            }
                        });
                        app.selectedRowKeys = [];
                        app.$notice('操作成功', 'message', 'success');
                        break;
                }
            },
            handleSearchSubmit() {
                let app = this;
                app.searchForm.validateFields(
                    (err) => {
                        if (!err) {
                            app.search();
                        }
                    })
            },
            search(){
                let obj = this.searchForm.getFieldsValue();
                if (obj.date && obj.date.length > 0) {
                    const beginDate = obj.date[0].format('YYYY-MM-DD');
                    const endDate = obj.date[1].format('YYYY-MM-DD');
                    obj.date = beginDate + '~' + endDate;
                }
                Object.assign(this.requestData, obj);
                this.init();
            },
            exportData() {
                let obj = this.searchForm.getFieldsValue();
                if (obj.date && obj.date.length > 0) {
                    const beginDate = obj.date[0].format('YYYY-MM-DD');
                    const endDate = obj.date[1].format('YYYY-MM-DD');
                    obj.date = beginDate + '~' + endDate;
                }
                Object.assign(this.requestData, obj);
                $http.post('project/task/exportData', this.requestData, {
                    procgress: true,
                    responseType: 'blob'
                }).then(res => {
                    const link = document.createElement('a');
                    let blob = new Blob([res], { type: 'application/ms-excel;charset=utf-8' });
                    link.style.display = 'none';
                    link.href = window.URL.createObjectURL(blob); //创建下载的链接
                    link.setAttribute('download', '工时统计' + '.xlsx');
                    document.body.appendChild(link);
                    link.click(); //点击下载
                    document.body.removeChild(link); //下载完成移除元素
                })
            }
        }
    }
</script>
